<template>
	<view class="container">	
		<u-tabs class="tabs" item-width="50%"  bar-width="370" bar-height="2" :list="tablist" :is-scroll="true" :current="current" @change="change" active-color="#AB61FF"></u-tabs>
		<view class="containers u-m-t-40" v-for="(item,index) in list" :key="index">
			<view class="u-flex u-row-center all">
				<text class="data">{{item.createAt}}</text>
			</view>
			<view class="see u-m-t-40">
				<view class="u-flex u-row-start u-border-bottom u-p-20">
					<image src="../../static/img/yongjin.png"></image>
					<text class="u-m-l-20 zhaop">{{item.title}}</text>
				</view>
				<view class="u-p-20 u-border-bottom">
					
					<view class="u-m-b-20"><text>{{item.content}}</text></view>
				
				</view>
				<view class="u-flex u-row-between u-p-20">
					<view class="detail" @click="ClickItem">
						查看详情
					</view>
					<view>
						<u-icon name="arrow-right" color="#888E9A" size="28" class="u-m-r-20"></u-icon>
					</view>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				tablist: [],
				current: 0,
				tabbar: [{
						"name": "系统通知",
						"foods": [],
						"type": '0'
					},
					{
						"name": "权益提醒",
						"foods": [],
						"type": '1'
					}
				],
				list:[]
			}
		},
		onLoad() {
			let that = this;
			this.tabbar.forEach(function(item) {
				that.tablist.push(item)
			})
			this.getList();
		},
		methods: {			
			change(index) {
				this.current = index;
				this.getList();
			},
			async getList(){
				let body= {
					firstType:this.current
				}
				if(this.current == 1){
					body.userId = this.$store.state.userInfo.id
				}
				let {data} = await this.$apis.systemmessageList(body);
				this.list = data;
			},
			ClickItem() {
				this.$mRouter.push({
					route: this.$mRoutesConfig.ppxxxq
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #f4f4f4;
	}
.container {
		.tabs {}

		.list {
			width: 100%;
			padding: 20upx;

			.item {
				width: 100%;
				background: #fff;
				padding: 28upx;
				border-radius: 20upx;
				display: flex;
				justify-content: space-between;
				height: 206upx;
				margin-bottom: 20upx;

				.right {
					display: flex;
					flex-direction: column-reverse;

					image {
						width: 105upx;
						height: 96upx;
					}
				}

				.left {
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.item-cell {
						display: flex;

						.title {
							line-height: 30upx;
							height: 30upx;
							color: #9DA2B0;
							font-size: 30upx;
						}

						.value {
							line-height: 30upx;
							height: 30upx;
							color: #0D1D36;
							font-size: 30upx;
							margin-left: 30upx;
						}

						.text {
							color: #4B9CFF;
							font-size: 30upx;
						}
					}
				}
			}
		}
	}
	.all {
		.data {
			font-size: 28rpx;
			color: #888E9A;
		}
	}

	.see {
		width: 710rpx;
		// height: 350rpx;
		margin: 0 auto;
		background: #FFFFFF;
		border-radius: 20rpx;

		image {
			width: 36rpx;
			height: 36rpx;
		}

		.zhaop {

			font-weight: bold;
			font-size: 32rpx;
		}

		.name {

			color: #4C9CFF;
		}

		.detail {

			color: #888E9A;

			font-size: 28rpx;
		}
	}
</style>
